<template>
	<view class="property-manage">
		<!-- 属性项列表 -->
		<uni-card title="属性项列表" isFull>
			<uni-table border stripe emptyText="暂无属性项">
				<uni-tr>
					<uni-th width="20" align="center">ID</uni-th>
					<uni-th width="20" align="center">属性名称</uni-th>
					<!-- <uni-th align="center">备注</uni-th> -->
					<uni-th width="80" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="item in properties" :key="item.id">
					<uni-td align="center">{{ item.id }}</uni-td>
					<uni-td>{{ item.name }}</uni-td>
					<!-- <uni-td>{{ item.remark || '-' }}</uni-td> -->
					<uni-td>
						<view class="action-buttons">
							<button class="mini-btn" type="primary" size="mini" @click="showPropertyDialog(item)">管理</button>
							<button class="mini-btn" type="primary" size="mini" @click="showPropertyForm(item)">编辑</button>
							<button class="mini-btn" type="warn" size="mini" @click="deleteProperty(item.id)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<button type="primary" class="add-btn" @click="showPropertyForm()">添加属性项</button>
		</uni-card>

		 
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import {
	getPropertyPage,
	createProperty,
	updateProperty,
	deleteProperty,
} from '@/api/mall/product/property';

// 属性项数据
const properties = ref([]);
const propertyForm = ref();
const propertyFormData = ref({
	id: null,
	name: '',
	remark: '',
});
const propertyFormMode = ref('create');

// 计算属性
const propertyFormTitle = computed(() => (propertyFormMode.value === 'create' ? '添加属性项' : '编辑属性项'));

// 表单验证规则
const propertyRules = {
	name: {
		rules: [{ required: true, errorMessage: '请输入属性名称' }],
	},
};

// 加载数据
const loadProperties = async () => {
	const res = await getPropertyPage({ pageNo: 1, pageSize: 100 });
	properties.value = res.data.list;
};

// 初始化加载
onMounted(() => {
	loadProperties();
});

// 属性项操作
const showPropertyDialog = (property) => {
  console.log('跳转到属性值管理页面，属性ID:', property.id);
  uni.navigateTo({
    url: `/pages/product/PropertyValueManage?id=${property.id}&name=${encodeURIComponent(property.name)}`
  });
};

const showPropertyForm = (property = null) => {
	propertyFormMode.value = property ? 'update' : 'create';
	propertyFormData.value = property ? { ...property } : { id: null, name: '', remark: '' };
	propertyForm.value.open();
};

const submitPropertyForm = async () => {
	try {
		if (propertyFormMode.value === 'create') {
			await createProperty(propertyFormData.value);
		} else {
			await updateProperty(propertyFormData.value);
		}
		await loadProperties();
		uni.showToast({ title: '操作成功', icon: 'success' });
		propertyForm.value.close();
	} catch (e) {
		console.error(e);
	}
};

const deleteProperty = async (id) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除该属性项吗？',
		success: async (res) => {
			if (res.confirm) {
				await deleteProperty(id);
				await loadProperties();
				uni.showToast({ title: '删除成功', icon: 'success' });
			}
		},
	});
};

const closePropertyForm = () => {
	propertyForm.value.close();
};
</script>

<style scoped>
.property-manage {
	padding: 15px;
}

.action-buttons {
	display: flex;
	justify-content: center;
	gap: 5px;
}

.mini-btn {
	margin: 0;
	padding: 0 10px;
	font-size: 12px;
}

.add-btn {
	margin-top: 15px;
}
</style>